<template>
	<gracePage statusBarBG="#545454" background="#545454">
			<!--  演示一个渐变背景，请根据项目实际需求自行改进  -->
			<view slot="gHeader" style="background-color: #545454;">
				<view class="grace-header-body">
					<!-- 返回按钮 -->
					<view class="grace-header-icons grace-icons icon-arrow-left grace-white" @tap="appFn.navigateBackFn"></view>
					<!-- 中间内容 -->
					<view class="grace-header-content-noflex text-center"><text class="grace-white grace-h4">会员中心</text></view>
					<!-- 设置按钮 -->
					<view class="grace-header-icons your-icon iconerweima1 font-size-34 grace-white"></view>
				</view>
			</view>
			<!-- 主体内容开始区域  -->
			<view slot="gBody">
				<swiper :style="{ height: boxHeight + 'px' }">
					<swiper-item >
						<view class="nav-box">
							<view class="grace-body">
								<view class="grace-header-body" style="padding-top: 70rpx;">
									<!-- 返回按钮 -->
									<view class="grace-header-icons grace-white"></view>
									<!-- 中间内容 -->
									<view class="grace-header-content-noflex">
										<view class="grace-columns grace-flex-vcenter">
											<text class="grace-h2 grace-white">普通会员</text>
											<text class="grace-badge grace-bg-gray mx-1 grace-text visibilty" :class="{visibiltyVisible :userInfo.user_rank == '6'}">当前级别</text>
										</view>
									</view>
									<!-- 设置按钮 -->
									<view class="grace-header-icons grace-h3 grace-icons icon-arrow-right grace-white"></view>
								</view>
							</view>
							<view class="grace-nowrap grace-flex-center  grace-flex-vcenter">
								<view class="width-250" @tap="showShade(7)">
									<graceBorderRadius background="linear-gradient(to right, #CDA744,#EFCB83)" :radius="['33rpx', '33rpx', '33rpx', '33rpx']">
										<text class="grace-white link-text">升级顾问</text>
									</graceBorderRadius>
								</view>
								<view class="mt-3 text-center" style="width: 200rpx;"><image src="https://zhenzhixiao.cn/index/images/rank6.png" style="width: 150rpx;height: 175rpx;"></image></view>
								<view class="width-250" @tap="showShade(8)">
									<graceBorderRadius background="linear-gradient(to right, #CDA744,#EFCB83)" :radius="['33rpx', '33rpx', '33rpx', '33rpx']">
										<text class="grace-white link-text">升级导师</text>
									</graceBorderRadius>
								</view>
							</view>
							<view class="mx-5 mt-3">
								<text class="text-title">升级顾问</text>
								<view class="grace-rows">
									<image src="/static/images/arrow.png" class="pt-1 wh-32"></image>
									<text class="text-des">会员只需购买1个198元席位礼包，即可升级为自源顾问(终身有效)。</text>
								</view>
							</view>
							<view class="mx-5 mt-3">
								<text class="text-title">升级导师</text>
								<view class="grace-rows ">
									<image src="/static/images/arrow.png" class="pt-1 wh-32"></image>
									<text class="text-des">会员预购28个席位创业礼包，只需预付1980元，即可升级为馨然导师(终身有效)。</text>
								</view>
							</view>
						</view>
					</swiper-item>
					<swiper-item >
						<view class="nav-box">
							<view class="grace-body">
								<view class="grace-header-body" style="padding-top: 70rpx;">
									<!-- 返回按钮 -->
									<view class="grace-header-icons grace-icons icon-arrow-left grace-white"></view>
									<!-- 中间内容 -->
									<view class="grace-header-content-noflex">
										<view class="grace-columns grace-flex-vcenter">
											<text class="grace-h2" style="color: #E8BC79;">自源顾问</text>
											<text class="grace-badge mx-1 grace-text visibilty" style="background-color: #E8BC79;color: #fff;opacity:0.4;" :class="{visibiltyVisible :userInfo.user_rank == '7'}">当前级别</text>
										</view>
									</view>
									<!-- 设置按钮 -->
									<view class="grace-header-icons grace-h3 grace-icons icon-arrow-right grace-white"></view>
								</view>
							</view>
							<view class="grace-nowrap grace-flex-center  grace-flex-vcenter">
								<view class="width-250">
									<graceBorderRadius background="#A6A6A6" :radius="['33rpx', '33rpx', '33rpx', '33rpx']">
										<text class="grace-white link-text">升级顾问</text>
									</graceBorderRadius>
								</view>
								<view class="mt-3 text-center" style="width: 200rpx;"><image src="https://zhenzhixiao.cn/index/images/rank7.png" style="width: 150rpx;height: 175rpx;"></image></view>
								<view class="width-250" @tap="showShade(8)">
									<graceBorderRadius background="linear-gradient(to right, #CDA744,#EFCB83)" :radius="['33rpx', '33rpx', '33rpx', '33rpx']">
										<text class="grace-white link-text">升级导师</text>
									</graceBorderRadius>
								</view>
							</view>
							<view class="mx-5 mt-3">
								<text class="text-title">独家折扣</text>
								<view class="grace-rows">
									<image src="/static/images/arrow.png" class="pt-1 wh-32"></image>
									<text class="text-des">独享商城7折折扣，巨省日常开销！</text>
								</view>
							</view>
							<view class="mx-5 mt-3">
								<text class="text-title">小资津贴</text>
								<view class="grace-rows ">
									<image src="/static/images/arrow.png" class="pt-1 wh-32"></image>
									<text class="text-des">邀请亲友成为会员并购买产品，享受商城福利津贴！</text>
								</view>
							</view>
						</view>
					</swiper-item>
					<swiper-item>
						<view class="nav-box" style="margin-right: -rpx;">
							<view class="grace-body">
								<view class="grace-header-body" style="padding-top: 70rpx;">
									<!-- 返回按钮 -->
									<view class="grace-header-icons grace-h3 grace-icons icon-arrow-left grace-white"></view>
									<!-- 中间内容 -->
									<view class="grace-header-content-noflex">
										<view class="grace-columns grace-flex-vcenter">
											<text class="grace-h2" style="color: #C5ADE1;">馨然导师</text>
											<text class="grace-badge mx-1 grace-text visibilty" style="color: #fff; background-color: #C5ADE1;opacity: 0.4;" :class="{visibiltyVisible :userInfo.user_rank == '8'}">当前级别</text>
										</view>
									</view>
									<!-- 设置按钮 -->
									<view class="grace-header-icons grace-white"></view>
									<!-- <view class="grace-header-icons grace-h3 grace-icons icon-arrow-right grace-white"></view> -->
								</view>
							</view>
							<view class="grace-nowrap grace-flex-center  grace-flex-vcenter">
								<view class="width-250">
									<graceBorderRadius background="#A6A6A6" :radius="['33rpx', '33rpx', '33rpx', '33rpx']">
										<text class="grace-white link-text">升级顾问</text>
									</graceBorderRadius>
								</view>
								<view class="mt-3 text-center" style="width: 200rpx;"><image src="https://zhenzhixiao.cn/index/images/rank8.png" style="width: 150rpx;height: 175rpx;"></image></view>
								<view class="width-250">
									<graceBorderRadius background="#A6A6A6" :radius="['33rpx', '33rpx', '33rpx', '33rpx']">
										<text class="grace-white link-text">升级导师</text>
									</graceBorderRadius>
								</view>
							</view>
							<view class="mx-5 mt-3">
								<text class="text-title">独家折扣</text>
								<view class="grace-rows">
									<image src="/static/images/arrow.png" class="pt-1 wh-32"></image>
									<text class="text-des">独享商城6折折扣，巨省日常开销！</text>
								</view>
							</view>
							<view class="mx-5 mt-3">
								<text class="text-title">小资津贴</text>
								<view class="grace-rows ">
									<image src="/static/images/arrow.png" class="pt-1 wh-32"></image>
									<text class="text-des">邀请亲友成为会员并购买产品，享受商城福利津贴！</text>
								</view>
							</view>
							<view class="mx-5 mt-3">
								<text class="text-title">日进斗金</text>
								<view class="grace-rows ">
									<image src="/static/images/arrow.png" class="pt-1 wh-32"></image>
									<text class="text-des">无论是名下邀请的用户消费，还是用户进行二次分享消费，都能获得津贴！</text>
								</view>
							</view>
							<view class="mx-5 mt-3">
								<text class="text-title">轻松创业</text>
								<view class="grace-rows ">
									<image src="/static/images/arrow.png" class="pt-1 wh-32"></image>
									<text class="text-des">无需开店、无需投资压货，轻松代理商城产品，实现创业致富！</text>
								</view>
							</view>
						</view>
					</swiper-item>
				</swiper>
				<!-- 遮罩组件 @closeShade="closeShade" 实现点击关闭自身，如果不需要次功能则不绑定此事件即可 -->
				<graceShade @closeShade="closeShade" ref="graceShade">
					<view class="demo-msg grace-relative grace-bg-white grace-border-radius-small" @tap.stop="">
						<view class="m-3 height-1000" v-show="gradeIndex === 7">
							<view class="text-center color-green font-size-36 pt-2">
								自源顾问
							</view>
							<view class="py-2">
								<text class="grace-h4 color-green">
									升级顾问：
								</text>
							</view>
							<view>
								会员只需购买1个198元席位礼包，即可升级为自源顾问(终身有效)。
							</view>
							<view class="py-2">
								<text class="grace-h4 color-green">
									顾问两大权益：
								</text>
							</view>
							<view>
								<view class="grace-rows">
									<image src="/static/images/arrow.png" class="pt-1 wh-32"></image>
									<text class="text-des">独享商城7折折扣，巨省日常开销！</text>
								</view>
								<view class="grace-rows">
									<image src="/static/images/arrow.png" class="pt-1 wh-32"></image>
									<text class="text-des">邀请亲友成为会员并购买产品，享受商城福利 津贴！</text>
								</view>
							</view>
							<view class="my-footer mb-2 px-3">
								<button type="primary" class="grace-button" @tap="gotoSuit()">
									<text class="grace-h4">购买礼包</text>
								</button>
							</view>
						</view>
						<view class="m-3 height-1000" v-show="gradeIndex === 8">
							<view class="text-center color-green font-size-36 pt-2">
								馨然导师
							</view>
							<view class="py-2">
								<text class="grace-h4 color-green">
									升级导师：
								</text>
							</view>
							<view>
								会员预购28个席位创业礼包，只需预付1980元， 即可升级为馨然导师(终身有效)。
							</view>
							<view class="py-2">
								<text class="grace-h4 color-green">
									导师四大权益：
								</text>
							</view>
							<view>
								<view class="grace-rows">
									<image src="/static/images/arrow.png" class="pt-1 wh-32"></image>
									<text class="text-des">独享商城6折折扣，巨省日常开销！</text>
								</view>
								<view class="grace-rows">
									<image src="/static/images/arrow.png" class="pt-1 wh-32"></image>
									<text class="text-des">邀请亲友成为会员并购买产品，享受商城福利 津贴！</text>
								</view>
								<view class="grace-rows">
									<image src="/static/images/arrow.png" class="pt-1 wh-32"></image>
									<text class="text-des">无论是名下邀请的用户消费，还是用户进行二次分享消费，都能获得津贴！ </text>
								</view>
								<view class="grace-rows">
									<image src="/static/images/arrow.png" class="pt-1 wh-32"></image>
									<text class="text-des">无需开店、无需投资压货，轻松代理商城产品， 实现创业致富！</text>
								</view>
							</view>
							<view class="my-footer mb-2 px-3">
								<button type="primary" class="grace-button" @tap="gotoPay(3)">
									<text class="grace-h4">立即付款</text>
								</button>
							</view>
						</view>
						<view class="m-3 height-500" v-show="gradeIndex === 3">
							<view class="text-center color-green font-size-36 py-2">
								选择付款方式
							</view>
							<view class="mx-2">
								<radio-group name="danxuan" color="#1CA376">
									<view class="grace-form-item" v-for="(item, index) in payLists" :key="index">
										<view class="grace-flex grace-flex-vcenter">
											<image :src="item.icon" style="width: 46rpx;height: 46rpx;"></image>
											<text class="grace-form-label grace-black  ml-2">{{ item.text }}</text>
										</view>
										<view class="grace-form-body" style="padding:20rpx 0;text-align: right;">
											<label class="grace-check-item-v"><radio :value="item.value" :checked="index === current" @click="changePay(index)"></radio></label>
										</view>
									</view>
								</radio-group>
							</view>
							<view class="my-footer mb-2 px-3">
								<button type="primary" class="grace-button" @tap="payFn()">
									<text class="grace-h4">确认付款</text>
								</button>
							</view>
						</view>
						<!-- <image src="https://img-cdn-qiniu.dcloud.net.cn/uploads/article/20200805/3a3b07bd7db264febc0744bca97f6f8e.jpg" mode="widthFix" style="width:100%;"></image> -->
						<view class="close-btn grace-icons icon-close3  grace-absolute-rt" style="z-index: 99999;" @tap.stop="closeShade"></view>
					</view>
				</graceShade>
			</view>
			<!-- 底部导航 -->
			<view class="grace-footer my-bg-color grace-flex-center" slot="gFooter" @click="gotoExtension()">
				<text class="grace-white grace-h3 ">制作推广图</text>
			</view>
		</view>
	</gracePage>
</template>
<script>
import gracePage from '../../graceUI/components/gracePage.vue';
import graceHeader from '../../graceUI/components/graceHeader.vue';
import graceBorderRadius from '../../graceUI/components/graceBorderRadius.vue';
import graceShade from "../../graceUI/components/graceShade.vue";
import { mapState ,mapActions} from 'vuex';
export default {
	data() {
		return {
			boxHeight:600,
			// 判断点击的是导师还是顾问  7 顾问  8 导师
			gradeIndex:7,
			gradeNum:0,
			// 阻止重复提交
			submitPay:true,
			payLists: [
				{
					text: '微信',
					icon: 'https://img-cdn-qiniu.dcloud.net.cn/uni-ui/grid-2.png',
					name: 'wechat_app',
					provider: 'wxpay'
				},
				{
					text: '支付宝',
					icon: 'https://img-cdn-qiniu.dcloud.net.cn/uni-ui/grid-8.png',
					name: 'alipay',
					provider: 'alipay'
				}
			],
			current:0,
		};
	},
	computed: {
		...mapState({
			loginStatus: state => state.user.loginStatus,
			userInfo: state => state.user.userInfo
		}),
	},
	onLoad(){
		this.__init();
	},
	mounted() {
		
	},
	methods: {
		...mapActions(['getUserInfo']),
		async __init(){
			
			console.log('this.userInfo',this.userInfo)
		},
		gotoExtension(){
			this.navigateTo({
				url:"/pages/memberBox/extension/extension"
			})
		},
		// 监听选中的支付方式
		changePay(e) {
			this.current = e;
		},
		gotoPay : function (e) {
			// 等级不够不能购买
			// this.gradeIndex
			let rankNum = parseInt(this.userInfo.user_rank);
			console.log(this.gradeIndex,rankNum)
			if(this.gradeIndex <= rankNum){
				var text = '你当前等级为'+this.userInfo.rank_name;
				uni.showToast({ title: text, icon: 'none', mask: true });
				return;
			}
			// 要是以购买28 套套餐 收货极为导师  及不可选择
			if(this.userInfo.is_member === '1'){
				uni.showToast({ title: '已有支付订单，收货即可晋升为导师', icon: 'none', mask: true });
				return;
			}
			this.gradeNum = this.gradeIndex;
			this.gradeIndex = e;
		},
		gotoSuit(){
			uni.navigateTo({
				url: '/pages/suit/suitList/suitList'
			});
		},
		showShade : function (e) {
			this.gradeIndex = e;
			this.$refs.graceShade.showIt();
		},
		closeShade : function () {
			this.$refs.graceShade.hideIt();
		},
		async payFn(){
			console.log(this.current)
			
			if (this.submitPay){
				this.submitPay = false;
				let payMethod = this.payLists[this.current];
				// 获取支付方式和地址信息
				let options = {
					act: 'buy_member',
					pay_type: payMethod.name,
					rank_id: this.gradeNum
				};
				let data = await this.$HTTP.post('/api/api.php', options, { token: true });
				console.log('data',data)
				if(this.current === 0) data = data.info;
				uni.requestPayment({
					provider: payMethod.provider,
					orderInfo: data,
					success: e => {
						uni.showToast({ title: '支付成功', icon: 'none', mask: true });
						// 支付成功修改重新获取用户的信息
						this.getUserInfo();
						this.closeShade();
					},
					fail: e => {
						uni.showToast({ title: '支付失败', icon: 'none', mask: true });
					},
					complete: () => {
						this.submitPay = true;
					}
				});
			}
		}
	},
	components: {
		graceHeader,
		gracePage,
		graceBorderRadius,
		graceShade
	}
};
</script>
<style scoped>
	.wh-32{
		width: 32rpx;height: 32rpx;
	}
	.text-title{
		font-size: 32rpx;
		color: #262626;
	}
	.text-des{
		color: #595959;
		font-size: 28rpx;
	}
.nav-box {
	height: 318rpx;
	background-color: #545454;
}
.width-250 {
	width: 250rpx;
}
.link-text {
	line-height: 66rpx;
	display: block;
	width: 100%;
	text-align: center;
	font-size: 32rpx;
}
.my-bg-color{
	background-color: #1CA376;
	opacity:0.8;
	height: 96rpx;
	
}
.visibilty{
	visibility:hidden;
}
.visibiltyVisible{
	visibility:visible;
}
.color-green{
	color: #1BA375;
}
.height-1000{
	height: 1000rpx;
}
.height-500{
	height: 500rpx;
}
.my-footer{
	position:fixed; z-index:2; left:0; bottom:40rpx; background:#FFFFFF; width:600rpx; overflow:hidden;
}
.demo-msg{width:660rpx;}
.close-btn{width:80rpx; height:80rpx; line-height:80rpx; text-align:center; font-size:40rpx; z-index:7;}
</style>
